<template>
  <div class="top">
   <!-- <div class="list-top">
       <div class="top-left">
           <van-icon name="arrow-left" color="#fff" size="16px" @click="rouitem" />
       </div>
       <div class="top-right">
        发现活动
       </div>
   </div> -->
   <ul class="list">
    <li @click="list('DISTRICT')" :class="state.active ==2?'tabinde':''">区级活动</li>
 <li @click="list('PARK')" :class="state.active ==0?'tabinde':''">燕罗园区</li>
 <li @click="list('STREET')" :class="state.active ==1?'tabinde':''">燕罗街道</li>
 
</ul>
  </div>

<div class="activity-one">
 <van-list
 v-model:loading="loading"
 :finished="finished"
 finished-text="没有更多了"
 @load="onLoad"
>
 <van-cell v-for="(i,t) in  state.information" :key="t" @click="lisrout(i.cuid)">

  <div class="activity-item">
      <div class="item-left">
        <img :src="i.img" >
       
        <span> {{ i.nType }}</span>
      </div>
      <div class="item-right">
        <p>{{ i.title }}</p>
        <div class="tiele">{{ i.addr}}</div>
        <div class="tiele">{{ i.nDutyDept }}</div>
        <div class="item">
          <div class="item-leftt">
          <span>{{ i.actTypeL2 }}</span>
        </div>
        <div class="item-rightt">
          <img src="../../assets/yanjing.png" alt=""><span>{{ i.clicks }}</span>
          <img src="../../assets/fenxiang.png" class="fenxiang"><span>{{ i.shares  }}</span>
          <img src="../../assets/xingxing.png" class="xingxing"><span>{{ i.favorites?i.favorites:'0' }}</span>
        </div>
       </div>
      </div>
    </div>
    </van-cell> 
 </van-list>
 </div>
</template>
<script setup >
import $api from '@/utils/api'
const router = useRouter()
import axios from "axios";
import { Buffer } from "buffer/";
import { Base64 } from 'js-base64'; 
import sha256 from "js-sha256";


const crypto = require("crypto-js");
const getSignature = (msg, key, timestamp, nonce) => {
 console.log(msg,key,timestamp,nonce);
 const sha256Hex1 = sha256Hex(msg);  
   const hmacInput = key + timestamp + nonce + sha256Hex1;  
   const hmac2561 = hmac256(hmacInput, nonce); // 注意：这里的 nonce 应该不是 HMAC 密钥的一部分  
   return hmac2561;  
};
const sha256Hex = (msg) => {
  let lsit = crypto.SHA256(msg).toString(crypto.enc.Hex).toLowerCase()
  return lsit;
};

const hmac256 = (key, msg) => {
  const secretKey = crypto.enc.Utf8.parse(key);
  const msg1 = crypto.enc.Utf8.parse(msg);
  const hash = crypto.HmacSHA256(msg1, secretKey);
  return hash.toString(crypto.enc.Hex).toLowerCase();
};
const getRandomNumber=(min, max) =>{
   return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 示例用法
const msg = "请求报文信息";
const key = "w2cs1PPZazaPCvXw";
const timestamp = Math.floor(Date.now() / 1000);
const nonce = getRandomNumber(1000, 9999);
const start = ref(0); /* 页数，0开始 */
const limit = 20; /* 每页显示数量，默认20 */
const state = reactive({
 active: 2,
 activity:'',
 information:[],
 index:0,
})
const postData = reactive({
 relObjType: '',
 start:start.value,
 relObjID:'',
 limit: limit,
});
 const loading = ref(false);
 const finished = ref(false);
 const onLoad = () => {
   
if(state.active ==0){
 postData.relObjType = 'PARK'
 postData.relObjID =''
//  /440306025000
}else if(state.active ==1){
 postData.relObjType = 'STREET'
//  440306009000
  postData.relObjID ='440306009000'
} else if(state.active ==2){
 postData.relObjType = 'DISTRICT'
 postData.relObjID =''
}
   const signature = getSignature(JSON.stringify(postData), key, timestamp, nonce);
       let url = "https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/park/applet/page4activity";
 axios.post(url,postData,{
     headers: {
       "Timestamp": timestamp,
       "Signature": signature,
       "Nonce": nonce,
       "App-Id": "yljd",
     },
   })
   .then((res) => {
       res.data.data.forEach(item => {
         item.img  = 'https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/attachment/download/'+ Base64.encode(item.previewImg1)+'?serviceName=MinioAttachService'
         state.information.push(item)
       })
       loading.value = false;
   if (finished.value) {
     finished.value = false;
   }
   postData.start++;
   console.log(postData.start)
   if ( res.data.data.length == 20) {
     finished.value = false;
   } else {
     finished.value = true;
   }
   });
  
   };

   const list =(item) => {
     start.value = 0
     state.information= []
     postData.start =0
 if (item == 'PARK') {
   state.active =0
 }else if(item== 'STREET'){
   state.active =1
 }else if(item== 'DISTRICT'){
   state.active =2
 }
 onLoad()
}
const lisrout =(item) => {
  wx.miniProgram.navigateTo({ 
    url: '/packages/activity/detail/index?cuid='+item 
    })
}
const rouitem = () => {
       router.push({
   path: `/`
 })
   }
</script>
<style lang="scss" scoped>

.top{
 z-index: 11;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   .list-top{
       display: flex;
       height: 44px;
       line-height: 44px;
       background-color: #68A0F7;
       position: relative;
       .top-left{
           position: absolute;
           left: 0;
           top: 0;
           z-index: 111;
           width: 10%;
           text-align: center;
           font-size: 1rem;
       }
       .top-right{
           width: 100%;
           font-size: 1rem;
           text-align: center;
           color: #fff;
       }
   }
}
.list{
 z-index: 11;
 display: flex;
 height: 2.5rem;
 background-color: #fff;
 li{
   width: calc(100% / 3);
   text-align: center;
   line-height: 2.5rem;
   font-size: 1rem;
   
   box-sizing: border-box;
           border: 1px solid #ccc;
           border-right: 0px solid #ccc;
 }
 .tabinde{
           background-color: #D1F1FF;
           color: #4D9DE7;
       }
}
.van-list{
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}
.van-cell{
 width: 90%;
 padding: 0;
padding-bottom:0rem ;
:deep(){
 .van-cell__value{
   width: 100%;
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 .activity-item{
    margin-bottom: 0.8rem;
    width: 100%;
    display: flex;
    .item-left{
      position: relative;
      margin-right: 0.8rem;
      img{
        width: 6.25rem;
        height:6.25rem;
      }
      span{
        position: absolute;
        left: 0;
        top: 0;
        font-size: .8rem;
        color: #fff;
        background-color: #dbbc0a;
      }
    }
    .item-right{
      overflow: hidden;
      p{
        font-size:1.1rem;
        font-weight: 400;
        margin: 0;
        width:99% ;
        white-space: nowrap;
       overflow: hidden;
       color: #3B3B3B;
        text-overflow: ellipsis;
        margin-bottom: 0.2rem;
      }
      .tiele{
        text-align: left;
        font-size: .8rem;
        line-height: 1.4rem;
        color: #787979;
        width:99% ;
        white-space: nowrap;
       overflow: hidden;
       color: #3B3B3B;
        text-overflow: ellipsis;
        margin-bottom: 0.2rem;
      }
      .item{
        margin-top: 0.2rem;
        display: flex;
        justify-content: space-between;
        // padding-right: 0.8rem;
        box-sizing: border-box;
        .item-leftt{
          display: flex;
          span{
            padding: 0.1rem;
            font-size: 0.8rem;
            background-color: #D3DFEF;
          color: #3885E9;
          }
        }
        .item-rightt{
          display: flex;
          align-items: center;
          span{
            line-height: 1.4rem;
          }
          font-size: .8rem;
          color: #7D7E7E;
          img{
            position: relative;
            top:-0.05rem;
            width: 1.1rem;
            height: .8rem;
            margin-left: .5rem;
            margin-right: .2rem;
          }
          .fenxiang{
            width: .8rem;
            height: .9rem;
            top:-0.1rem;
          }
          .xingxing{
            top:-0.1rem;
            width: 1rem;
            height: .9rem;
          }
        }
      }
    }
  }
}
}

 &::after{
   display: none;
 }
}
.activity-one{
 padding-top: 65px;
 width: 100%;
 overflow: hidden;

 }
</style>